<div [ngClass]="{'full-screen': isFullscreen, 'main': true}">
	<header>
		<h1>走访实时看板</h1>
		<div class="showTime">
			<i nz-icon (click)="goHome();" style="font-size: 20px;margin-right: 10px;" *ngIf="!isFullscreen" nzType="fullscreen" nzTheme="outline"></i>
			<i nz-icon (click)="goPageHome();" style="font-size: 20px;margin-right: 10px;" *ngIf="isFullscreen" nzType="home" nzTheme="outline"></i>
			
			<span>{{showTime}}</span>
		</div>
	</header>
	<section class="mainbox">
		<div class="column">
			<div class="panel bar">
				<h2>
					基本信息
				</h2>
				<div class="no">
					<div class="no-bd no-item">
						<ul>
							<li>
								<span>{{addrStatistics?.areaNum || 0}}</span> <br>
								<span>社区数</span>
							</li>
							<li>
								<span>{{addrStatistics?.householdNum || 0}}</span> <br>
								<span>村户数</span>
							</li>
							<li>
								<!-- 总数 -->
								<span>{{gride?.griderTotal || 0}}</span> <br>
								<span>网格员</span>
							</li>
						</ul>
					</div>
				</div>
				<h2>
					网格员信息
				</h2>
				<div class="no">
					<div class="no-bd no-item">
						<ul>
							<li>
								<span>{{gride?.griders[0]}}</span> <br>
								<span>网格长</span>
							</li>
							<li>
								<span>{{gride?.griders[1]}}</span> <br>
								<span>网格员</span>
							</li>
							<li>
								<span>{{gride?.griders[2]}}</span> <br>
								<span>微网格长</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line">
				<h2>当前月</h2>
				<div class="no">
					<div class="no-bd no-item">
						<ul>
							<!-- <li>
								<span>12</span> <br>
								<span>学习人次</span>
							</li> -->
							<li>
								<span>{{disclose?.num}}</span> <br>
								<span>爆料人次</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie">
				<h2>社区信息</h2>
				<div class="no no-content">
					<div class="no-bd no-item">
						<ul>
							
							<ng-container *ngFor="let area of addrStatistics?.areas">
								<li>
									<span>{{area.total}}</span> <br>
									<span class="ellipsis" nz-tooltip [nzTooltipTitle]="area.typeName">{{area.typeName}}</span>
								</li>
							</ng-container>
							
						</ul>
					</div>
				</div>
				<div class="panel-footer"></div>
			</div>
		</div>
		<div class="column">
            <app-disclose-list></app-disclose-list>
			<!-- <div class="no">
				<div class="no-hd">
					<ul>
						<li>{{visitTotal.total1}}</li>
						<li>{{visitTotal.total2}}</li>
						<li>{{visitTotal.total3}}</li>
					</ul>
				</div>
				<div class="no-bd">
					<ul>
						<li>网格长</li>
						<li>网格员</li>
						<li>微网格员</li>
					</ul>
				</div>
			</div>
			<div class="map">
				<div class="chart"></div>
				<div class="map1"></div>
				<div class="map2"></div>
				<div class="map3"></div>
			</div> -->
		</div>
		<div class="column">
			<div class="panel bar1">
				<h2>网格长-完成情况</h2>
				<div class="chart" echarts [options]="visitEchartsOpt1"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line1">
				<h2>网格员-完成情况</h2>
				<div class="chart" echarts [options]="visitEchartsOpt2"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie1">
				<h2>微网格长-完成情况</h2>
				<div class="chart" echarts [options]="visitEchartsOpt3"></div>
				<div class="panel-footer"></div>
			</div>
		</div>
	</section>

</div>